<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>产品分类</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
	<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
	<meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
	<meta HTTP-EQUIV="expires" CONTENT="0">
	<link rel="stylesheet" th:href="@{'/static/css/common_1.css?v=' + ${timstamp}}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"  media="all">
	<link rel="stylesheet" th:href="@{/static/picbox/picbox.css}"  media="all">
	<script th:src="@{/static/js/jquery-2.1.1.min.js}" charset="utf-8"></script>
	<script th:src="@{/static/picbox/picbox.js}" charset="utf-8"></script>
	<script th:src="@{/static/layer/layer.js}" charset="utf-8"></script>
	<!--layui会引起什么乱子？？？？-->
	<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body class="grey-body">
<div th:replace="website/template/top.html"></div>

<div style="font-size:18px;padding:10px;font-weight: bold;" th:if="${session.role == null}">
	你是空角色账号，不属于任何分店，请进个人中心申请归属店铺
</div>
<!--vue-->
<div class="content-page" id="app" v-cloak>
	<div class="page-title" th:text="${shop?.name}"></div>
	<div class="item-list">
		<a class="box"  v-for="category in list" :href="'/web/product?cid=' + category.id">
			<div class="title" >{{category.title}}</div>
			<div class="picture">
				<img :src="imgUriPrefix + category.cover">
			</div>
			<div class="button">
				<img src="/static/img/button2.png" alt="">
			</div>
		</a>
	</div>
	<!--购物车-->
	<div th:replace="website/template/cart.html"></div>
</div>
</body>
<script src="/static/js/cart.js"></script>
<script th:src="@{/static/js/vue.js}"></script>
<script>
	// const layer = layui.layer
    var layerIndex
	const vm = new Vue({
		el: '#app'
		,mixins:[mixinsCommon]
		,data: {
			list: [],
			imgUriPrefix: '/static/',
			page:1,
			limit:6
		},
		created(){
		    this.fetchData()
		},
		methods:{
		    fetchData (){
		        console.log('读取数据')
                layerIndex = layer.load(0, {
                    // shade: [0,'#fff'] //0.1透明度的白色背景
                });
				$.ajax({
					type: 'get',
					url:'/web/category/list',
					data:{page: this.page, limit: this.limit, checked: true}
				}).done((res)=>{
				    if(res.data.length>0){
                        this.list = this.list.concat(res.data)
						this.page += 1 //页码加1
					}else{
				        layer.msg('已经到底了！')
					}
				}).always(function(){
					setTimeout(()=>{
                        layer.close(layerIndex)
					},500)
				})
			}
		}
	})

	let timer = null
    $(document).ready(function (){
        let wh = $(window).height() //窗口高度
		let _elheight =0 //整个容器的高
		let _limit = 150; //边界值

        $(document).scroll(function(){
			clearTimeout(timer)
            timer = setTimeout(()=>{
                _elheight = $(this).height() //重新取值，因为列表数据是在vue里面执行的
                let _scrollTop = $(this).scrollTop()
                console.log('滚动了,容器高是：',_elheight,'，滚动了：',_scrollTop)

                //滚动的高度 + 窗口高度 + 边界值，大于容器高度，就是滚动到底部
                if(wh + _scrollTop + _limit >= _elheight){
                    console.log("滚动条到底部了",layer);
                    vm.fetchData()
                }
			},500)
        });
    });


</script>
</html>